<template>
  <div>
      <h1 class="title">
          <router-link :to="{name: 'KoubeiList'}">列表</router-link>
          <router-link :to="{name: 'KoubeiAdd'}">添加</router-link>
      </h1>
    <van-divider
      dashed
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >口碑列表</van-divider>
    <van-search v-model="keywords" placeholder="请输入搜索关键词" @search="onSearch" />

    <van-cell-group>
    <!-- query传参：路由不带 :key , 支持name和path  -->
    <!-- params传参：路由一定带 :key , 仅支持name  -->
      <van-cell
        :title="item.username"
        :label="item.inputtime | formateDate"
        v-for="(item, index) in list"
        :key="index"
        :to="{name: 'KoubeiDetail', query: {id: item.id}}"
      >
        <template #default>来源： {{item.source | formateSource}}</template>
      </van-cell>
    </van-cell-group>

<!-- 分页 -->
    <van-pagination
      v-model="curr"
      :total-items="total"
      :items-per-page="limit"
      @change="changePage"
    />
  </div>
</template>

<script>
import request from "@/api/koubei.js";
import "@/utils/filters.js";
export default {
  data() {
    return {
      keywords: "",
      limit: 6,
      list: [],
      curr: 1,
      total: 0,
    };
  },
  created() {
    this.loadList();
  },
  methods: {
    loadList() {
      request
        .search({ curr: this.curr, limit: this.limit, username: this.keywords })
        .then((r) => {
          console.log(r.data);
          this.total = r.data.total;
          this.list = r.data.list;
        });
    },

    changePage() {
      //   console.log(this.curr);
      // 每次当前页数改变时，就重新请求列表
      this.loadList();
    },

    onSearch(val) {
    //   console.log(val);
      this.loadList();
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
    padding-left: 20px;
    padding-top: 20px;
    font-size: 40px;
    a {
        margin: 0 10px;
    }
}
</style>